<template>
  <div>
    <el-popover trigger="hover" placement="top" popper-class="tip-popover" width="500"
      v-show="type == 'text'">
        <p>{{content || '-'}}</p>
        <div slot="reference" class="name-wrapper">
            {{content || '-'}}
        </div>
    </el-popover>
    <el-popover
      v-show="type == 'dialog'"
      placement="top"
      width="160"
      v-model="popover">
      <p>{{content}}</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="popover = false">取消</el-button>
        <el-button type="primary" size="mini" @click="confirm">确定</el-button>
      </div>
      <el-button slot="reference" type="text" size="mini" :class="warning ? 'warning' : ''">{{btnText}}</el-button>
    </el-popover>
  </div>
</template>
<script>
export default {
  name: "Popover",
  props: {
    content: String,
    type: String,
    btnText: String,
    warning: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      popover: false
    };
  },
  methods: {
    confirm(){
      this.popover = true;
      this.$emit('popover');
    }
  },
  watch: {
    'popoverShow': function(val,oldVal){
      console.log(val);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../assets/scss/variable.scss";
.warning {
  color: $xy-btn-text-warning;
}
.tip-popover{
  background-color: #000;
  color: #fff;
}
.name-wrapper{
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>

